<template>
    <div class="account">
        <x-header v-show="!isWeChar">
            <div slot="default" class="common__header--title">账号设置</div>
            <div @click="goBack" slot="overwrite-left" class="common__header--img"><img slot="icon" src="~assets/x3/ico/goback1.png" class="go-back"></div>
            <!-- <div slot="right">{{saveInsure.hotArea.areaName}}</div> -->
        </x-header>
        <group>
            <cell title="手机号码" @click.native="gotoPage(RouteUrl.MGT_MOBILE)" class="account__list--title" is-link>
                <div class="account__list--rightfont" slot>
                    {{(user.userDto.mobile)|filter_mobile}}
                </div>
            </cell>
            <!-- <cell title="姓名" @click.native="gotoPage(RouteUrl.MGT_USER_NAME)" class="account__list--title" is-link>
                <div class="account__list--rightfont" :title="userName" slot>
                    {{userName | filter_uname}}
                </div>
            </cell> -->
            <cell title="实名认证" @click.native="gotoPage(RouteUrl.MGT_IDNUMBER)" class="account__list--title" is-link>
                <div class="account__list--rightfont" slot>{{userName}}</div>
            </cell>
            <cell title="客户编号" class="account__list--title">
                <div class="account__list--rightfont" slot>{{user.userDto.userCode}}</div>
            </cell>
            <cell title="银行卡" @click.native="gotoPage(RouteUrl.MGT_BANKS)" class="account__list--title" is-link>
                <div class="account__list--rightfont" slot>{{myDefaultBank()|filter_num}}</div>
            </cell>
            <cell title="密码管理" @click.native="gotoPage(RouteUrl.MGT_PASSWORD)" class="account__list--title" is-link> </cell>
        </group>
        <group v-show="isShowAgr()">
            <cell title="业务关系代码" @click.native="gotoPage(RouteUrl.CODE_AUTHENTICATION)" class="account__list--title" is-link>
                <div class="account__list--rightfont" slot>
                    {{user.userDto.agrementNo}}
                </div>
            </cell>
        </group>
        <group v-if="haveSuperior(user.userDto.comCode)">
            <cell title="我的上级" @click.native="gotoPage(RouteUrl.MY_SUPERIOR)" class="account__list--title" is-link> </cell>
        </group>
        <group v-if="false">
            <cell title="配送地区" class="account__list--title" is-link> </cell>
            <cell title="常驻地区" class="account__list--title" is-link> </cell>
            <cell title="车辆管理" class="account__list--title" is-link> </cell>
        </group>
    </div>
</template>

<script>
import { XHeader, Group, Cell } from "vux";
import { RouteUrl, Mutations, StrLenth } from "src/common/const";
import Validation from "src/common/util/validation";
import { RequestUrl } from "src/common/url";
import { mapState } from "vuex";

export default {
    components: { XHeader, Group, Cell },
    computed: mapState(["user", "saveInsure", "isWeChar"]),
    data() {
        return {
            RouteUrl: {},
            userName: ""
        };
    },
    filters: {
        filter_mobile(val) {
            if (typeof (val) != 'undefined' && val != null) {
                return val.substring(0, 3) + "*****" + val.substring(val.length - 3, val.length);
            }
            return val;
        },
        filter_idNumber(val) {
            if (typeof (val) != 'undefined' && val != null && val.length >= 15) {
                return val.substring(0, 5) + "**********" + val.substring(val.length - 3, val.length);
            }
            return val;
        },
        filter_num(val) {
            if (typeof (val) != 'undefined' && val != null && val.length >= 16) {
                return val.substring(0, 4) + " **** **** **** " + val.substring(val.length - 3, val.length);
            }
            return val;
        }
    },
    methods: {
        isShowAgr() {
            if (this.$common.isNotEmpty(this.user.userDto.agrementNo)) {
                return true;
            }
            return false;
        },
        goBack() {
            this.$common.goBackUrl(this, RouteUrl.MY);
        },
        haveSuperior(comcode) {
            if (this.$common.isNotEmpty(comcode) && (comcode.toUpperCase().indexOf("WX") || comcode.toUpperCase().indexOf("BS"))) {
                return true;
            }
            return false;
        },
        //获取银行卡信息
        myDefaultBank() {
            let num = "";
            if (this.$common.isNotEmpty(this.user.userDto.banks) && this.user.userDto.banks.length > 0) {
                let banks = this.user.userDto.banks;
                for (let i = 0; i < banks.length; i++) {
                    if ("1" == banks[i].isDefault) {
                        num = banks[i].number;
                        break;
                    }
                }
                if (this.$common.isEmpty(num)) {
                    num = banks[0].number;
                }
            }
            return num;
        },
        gotoPage(routeUrl) {
            let _this = this;
            if ((routeUrl === RouteUrl.MGT_PASSWORD || routeUrl === RouteUrl.MGT_IDNUMBER || routeUrl === RouteUrl.MGT_BANKS)
                && Validation.isErrPhone11(_this.user.userDto.mobile)) {
                //手机号无效则先绑定手机
                _this.$vux.confirm.show({
                    content: _this.$common.alertMsg("请先绑定有效手机号码", "red;"), //显示内容
                    showInput: false, //是否显示input
                    confirmText: "确认",
                    cancelText: "取消",
                    onCancel() { ; },
                    onConfirm() { _this.$common.goUrl(_this, RouteUrl.MGT_MOBILE); }
                });
                return;
            }
            //银行卡管理
            if (routeUrl === RouteUrl.MGT_BANKS && !Validation.isRealName(_this.user.userDto.userName, _this.user.userDto.idNumber, _this.user.userDto.idType)) {
                _this.$vux.confirm.show({
                    content: _this.$common.alertMsg("请先实名认证<br>并确保是中文姓名", "red;"), //显示内容
                    showInput: false, //是否显示input
                    confirmText: "确认",
                    cancelText: "取消",
                    onCancel() { ; },
                    onConfirm() { _this.$common.goUrl(_this, RouteUrl.MGT_IDNUMBER); }
                });
                return;
            }
            _this.$common.goUrl(_this, routeUrl);
        },
        initPage() {
            if (!this.user.isLogin) {
                this.$common.goUrl(this, RouteUrl.LOGIN);
            }
            if (Validation.isRealName(this.user.userDto.userName, this.user.userDto.idNumber, this.user.userDto.idType)) {
                this.userName = this.user.userDto.userName;//已实名
                return;
            }
            //实名无效时不显示姓名
            this.userName = "";
        }
    },
    mounted() {
        document.title = '账号设置';
        this.RouteUrl = RouteUrl;
        this.$init.subPageInit(this);
        let _this = this;
        setTimeout(function () {
            //初始化当前页面信息
            _this.initPage();
        }, 1);
    }
};
</script>

<style lang="less" scoped>
.account__head--img {
  width: 44px;
  height: 44px;
  border-radius: 100%;
}

.account__list--title {
  font-size: 15px;
  color: #808080;
}

.account__list--rightfont {
  font-size: 15px;
  color: #808080;
  img {
    display: block;
    float: right;
    padding: 0px 10px;
    margin-top: 1px;
  }
}
</style>







